<template>
  <el-dialog
    title="新增目录"
    :visible.sync="addDialogVisible"
    width="20%"
    @close="clearAddFrom"
    :before-close="handleClose"
  >
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="所属学科" v-if="openSubjectSort">
        <el-select v-model="addForm.subject" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="name">
        <el-input v-model="addForm.name" placeholder="请输入目录名称"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addDirectory">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { gstSubList, addDirectoryList, addTags } from '@/assets/api/subjectManage.js';
export default {
  props: {
    bool: Boolean,
    openSubjectSort: Boolean,
    id: [String, undefined],
    sub: Object,
    names: String
  },
  data() {
    return {
      // 添加对话框的显隐
      addDialogVisible: false,
      // 添加对话框的表单
      addForm: {
        name: '',
        subject: ''
      },
      // select下拉列表
      selectList: [],
      // 是否从学科点进来的
      subBool: false,
      // 添加表单的规则
      rules: {
        name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    if (this.openSubjectSort) {
      this.getSubList();
    }
  },
  methods: {
    // 获取下拉菜单列表
    async getSubList() {
      const { data } = await gstSubList();
      this.selectList = data;
    },
    // 点x关闭
    handleClose() {
      this.addDialogVisible = false;
    },
    // 点击确定完成添加
    async addDirectory() {
      if (this.names === 'subjectSort') {
        if (this.openSubjectSort) {
          await addDirectoryList({
            subjectID: this.addForm.subject, // 科目id
            directoryName: this.addForm.name
          });
        } else {
          await addDirectoryList({
            subjectID: Number(this.id), // 科目id
            directoryName: this.addForm.name
          });
        }
      } else {
        if (this.openSubjectSort) {
          await addTags({
            subjectID: this.addForm.subject, // 科目id
            tagName: this.addForm.name
          });
        } else {
          await addTags({
            subjectID: Number(this.id), // 科目id
            tagName: this.addForm.name
          });
        }
      }
      this.$emit('offAdd');
      this.addDialogVisible = false;
    },
    // 表单关闭执行
    clearAddFrom() {
      this.$refs.addForm.resetFields();
      this.$refs.addForm.model.subject = ''
      this.$emit('offAdd');
    }
  },
  watch: {
    bool(val) {
      this.addDialogVisible = val;
    }
  }
};
</script>

<style lang="less">
.el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background-color: #409eff;
    padding-top: 15px;
    color: #fff;
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
}
</style>
